<template>
    <div>
        <van-nav-bar title="业绩详情" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="desc-wrap">
            <div class="desc-top">
                <img :src="salesData.avatar"/>
                <h4>{{salesData.nickname}}</h4>
            </div>
            <div class="desc-bottom">
                <section>
                    <h5>个人业绩</h5>
                    <ul>
                        <li>
                            <h6>个人总业绩</h6>
                            <p>¥{{salesData.memberSales}}</p>
                        </li>
                        <li>
                            <h6>个人本月业绩</h6>
                            <p>¥{{salesData.memberMonthSales}}</p>
                        </li>
                        <li>
                            <h6>个人上月业绩</h6>
                            <p>¥{{salesData.memberLastMonthSales}}</p>
                        </li>
                    </ul>
                </section>
                <section>
                    <h5>团队业绩</h5>
                    <ul>
                        <li>
                            <h6>团队总业绩</h6>
                            <p>¥{{salesData.memberTeamSales}}</p>
                        </li>
                        <li>
                            <h6>团队本月业绩</h6>
                            <p>¥{{salesData.memberTeamMonthSales}}</p>
                        </li>
                        <li>
                            <h6>团队上月业绩</h6>
                            <p>¥{{salesData.memberTeamLastMonthSales}}</p>
                        </li>
                        <li>
                            <h6>团队人数</h6>
                            <p>{{salesData.memberChildrenNums}}人</p>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
    </div>
</template>
<script>
    import api from "@/utils/restful";

    export default {
        data() {
            return {
                salesData: {},
            };
        },
        mounted() {
            let memberId = this.$route.query.memberId;
            console.log(memberId);
            this.salesDetail(memberId)
        },
        methods: {
            salesDetail(memberId) {
                this.$axios({
                    method: "get",
                    url: api.teamSales,
                    params: {
                        token: localStorage.getItem("token"),
                        memberId: memberId
                    }
                }).then(res => {
                    console.log(res);
                    if (res) {
                        this.salesData = res.data;
                        console.log(res.data);
                    }
                });
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .desc-wrap {
        margin: 10px;
        background-color: #fff;
        box-shadow: 0px 0px 4px 0px rgba(202, 202, 202, 1);
        border-radius: 18px;
    }

    .desc-top {
        height: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid #f6f6f6;

        img {
            width: 27px;
            height: 27px;
            margin-right: 10px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.66);
        }

        h4 {
            .font-dpr(14px);
        }
    }

    .desc-bottom {
        section {
            padding: 20px 15px;

            h5 {
                .font-dpr(18px);
                color: @fontColorH3;
            }
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            li {
                flex: 0 0 33%;
            }

            h6 {
                margin: 10px 0;
                .font-dpr(14px);
                color: #000;
                font-weight: normal;
            }

            p {
                .font-dpr(16px);
                color: #868686;
            }
        }
    }
</style>
